@import "../common/common.scss";

.device-info-page {
    background-color: #f8f9fa;
    padding-top: calc(env(safe-area-inset-top) + 160rpx);
    padding-bottom: env(safe-area-inset-bottom);
    position: relative;
    box-sizing: border-box;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.infoList {
    flex: 1;
    height: 0;
    overflow-y: auto;

    .cardList {
        display: flex;
        flex-direction: column;
        gap: 28rpx;
    }

}

.vBoxShadow {
    background: #fff;
    border-radius: 24rpx;
}


.subList {
    .listItem {
        border-bottom: #f8f9fa 1px solid;
        display: flex;
        padding: 22rpx 34rpx;
        font-size: 28rpx;
        color: #555557;

        &:last-child {
            border-bottom: none;
        }

        .label {
            flex-shrink: 0;
            width: 8em;
            position: relative;

            &::before {
                width: 38rpx;
                content: '';
                display: inline-block;
            }

            &::after {
                content: '';
                display: block;
                width: 8rpx;
                height: 8rpx;
                background: #7EAEFF;
                position: absolute;
                top: 16rpx;
                border-radius: 50%;
                left: 10rpx;

            }
        }

        .value {
            flex-grow: 1;
        }
    }

    .green {
        color: #16C46A;
    }
    .gray {
        color: #99a9b9;
    }

    .blue {
        color: #7EAEFF;
    }

    .red {
        color: #FF5340;
    }

    .orange {
        color: #f9c669;
    }
}

.contractList {
    width: 100%;

    .list {
        white-space: nowrap;
    }

    .single {
        padding-right: 20rpx;
        display: inline-block;
    }

    .image {
        width: 200rpx;
        height: 200rpx;
    }
}

.locationBox {
    padding: 24rpx;

    .location {
        font-size: 28rpx;
        padding: 0 0 18rpx 0;
    }

    .map {
        position: relative;

        &::after {
            background: rgba(46, 139, 200, .5);
            display: block;
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            // pointer-events: none;
        }

        .marker {
            position: absolute;
            z-index: 9;
            width: 80rpx;
            height: 80rpx;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(calc(-100% + 20rpx));

            .image {
                width: 80rpx;
                height: 80rpx;
            }
        }
    }
}

.myMap {
    width: 100%;
    height: 300rpx;
    filter: grayscale(.8) hue-rotate(115deg);
}

.fixedButton {
    width: 108rpx;
    height: 108rpx;
    background: #fff;
    border-radius: 50%;
    position: fixed;
    right: 80rpx;
    bottom: 80rpx;
    color: #058AFF;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, .2);

    .iconfont {
        font-size: 42rpx;
    }
}